<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<svg></svg>
<script>
const svgNs = 'http://www.w3.org/2000/svg';

function makeImage(test) {
  var image = document.createElementNS(svgNs, 'image');
  image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'resources/red-checker.png');
  image.setAttribute('width', 10);
  image.setAttribute('height', 10);
  image.onload = test.step_func(function() {
    assert_true(true);
    setTimeout(function() { test.done(); }, 0);
  });
  return image;
}

function makeSvg(test) {
  var svgRoot = document.createElementNS(svgNs, 'svg');
  svgRoot.onload = test.unreached_func("SVG 'load' should not be fired after document 'load'");
  return svgRoot;
}

function makeSvgWithImage(test) {
  var svgRoot = makeSvg(test);
  svgRoot.appendChild(makeImage(test));
  return svgRoot;
}

var t0 = async_test("No 'load' event fired after document load for outer SVG root.");
var t1 = async_test("No 'load' event fired after document load for outer SVG root w/ image.");
var t2 = async_test("No 'load' event fired after document load for inner SVG root.");
var t3 = async_test("No 'load' event fired after document load for inner SVG root w/ image.");

window.onload = function() {
  var parsedSvg = document.querySelector('svg');

  t0.step(function() { document.body.appendChild(makeSvg(t0)); });
  t1.step(function() { document.body.appendChild(makeSvgWithImage(t1)); });

  t2.step(function() { parsedSvg.appendChild(makeSvg(t2)); });
  t3.step(function() { parsedSvg.appendChild(makeSvgWithImage(t3)); });

  setTimeout(function() {
    t0.done();
    t2.done();
  }, 0);
};
</script>
